<template>
    <div>


        <el-form ref="form" :model="form" label-width="80px" style="width: 350px;">
            <el-form-item label="手机号">
                <el-input v-model="phone"></el-input>
            </el-form-item>
            <el-form-item label="验证码">
                <el-input v-model="code">
                    <template slot="append">
                        <el-button @click="sendSmsCode" type="primary" :disabled="buttonDisable">{{buttonText}}</el-button>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="是否HR">
                <el-checkbox v-model="isHr"></el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
        </el-form>



    </div>
</template>

<script>
    export default {
        name: "login",
        data(){
            return {
                form:{},
                phone:"",
                code:"",
                //验证码相关
                currentNum:0,
                buttonText:"发送验证码",
                buttonDisable:false,
                setIntervalId:-1,
                isHr:false,
            }
        },
        methods:{
            sendSmsCode(){
                if(this.phone==""){
                    this.$message.error("请输入手机号在发送验证马")
                    return ;
                }
                this.axios.post("/zhaopinlogin/user/sendSmsCode?phone="+this.phone).then(res=>{
                    if(res.data.code==1){
                        this.$message.success("发送成功")

                        this.buttonDisable = true;
                        this.currentNum = 10;

                        this.setIntervalId = setInterval(()=>{
                            this.changeNum();
                        },1000)
                    }else{
                        this.$message.error(res.data.message)
                    }
                })
            },
            changeNum(){
                this.currentNum--;
                if(this.currentNum==0){
                    this.buttonDisable = false;
                    this.buttonText = "重新发送验证码";
                    clearInterval(this.setIntervalId)
                    this.setIntervalId = -1;
                }else{
                    this.buttonText = "剩余："+this.currentNum+"秒";
                }

            },

            login(){

                let obj = {
                    phone:this.phone,
                    code:this.code,
                    isHr:this.isHr
                }

                this.axios.post("/zhaopinlogin/user/login",obj).then(res=>{
                    let myresult = res.data;
                    if(myresult.code == 1){
                        this.$message.success("登录成功,页面即将跳转")

                        let user = myresult.data;
                        localStorage.setItem("zhaopin_user",JSON.stringify(user));

                        setTimeout(()=>{
                            if(this.isHr){
                                this.$router.push("/info")
                            }else{
                                this.$router.push("/my")
                            }
                        },1500)
                    }else{
                        this.$message.error(myresult.message);
                    }
                })


            }
        }
    }
</script>

<style scoped>

</style>
